<template>
    <div class="room-manage">
        <div class="personal-manage-title">权限管理</div>
        <div class="wrap">
            <div class="left-page el-card">
                <roleMenu @setParams="setParams"></roleMenu>
            </div>
            <el-card v-if="isShowTip" class="right-page emt">
                <div>
                    <img
                        src="../../../../common/pic/icon_emt.png"
                        alt
                        width="140"
                        height="140"
                    />
                    <p>页面空空的，请先选择角色！</p>
                </div>
            </el-card>
            <el-card v-else class="right-page">
                <div class="head">
                    <div>
                        <span>|</span>
                        <span style="margin-left: 10px">{{
                            currentRole.name
                        }}</span>
                    </div>
                </div>
                <div class="flex">
                    <el-form
                        ref="form"
                        size="mini"
                        inline
                        :model="form"
                        label-width="80px"
                    >
                        <el-form-item label="用户账户:" prop="userName">
                            <el-input
                                type="text"
                                v-model="form.userName"
                                class="item"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="用户状态:" prop="status">
                            <el-select
                                v-model="form.status"
                                class="item"
                                placeholder="请选择"
                            >
                                <el-option label="全部" value></el-option>
                                <el-option label="启用" value="0"></el-option>
                                <el-option label="停用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="getList"
                            class="el-button-1"
                            >查询</el-button
                        >
                    </el-form>
                    <div>
                        <el-button
                            type="primary"
                            size="small"
                            @click="showSet = true"
                            >批量设置</el-button
                        >
                        <el-button
                            type="primary"
                            size="small"
                            @click="
                                row = {}
                                showValue = true
                            "
                            >添加</el-button
                        >
                        <!--测试用-->
                        <!-- <el-button
                            type="primary"
                            size="small"
                            @click="testAdd = true"
                            >添加菜单</el-button
                        > -->
                    </div>
                </div>
                <div class="report-table-wrapper">
                    <el-table
                        v-loading="loading"
                        :header-cell-style="headerCellStyle"
                        :data="tabData"
                        border
                        size="small"
                    >
                        <el-table-column
                            v-for="(item, index) in tabClounm"
                            :key="index"
                            :prop="item.fieldName"
                            align="left"
                            :label="item.fieldLabel"
                            min-width="100"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="item.fieldName === 'status'">{{
                                    scope.row.status === 0 ? '启用' : '停用'
                                }}</span>
                                <span
                                    v-else-if="item.fieldName === 'isSpecial'"
                                    >{{
                                        scope.row.isSpecial === 1 ? '是' : '否'
                                    }}</span
                                >
                                <span v-else>{{
                                    scope.row[item.fieldName]
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="150px"
                            fixed="right"
                            align="center"
                            label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="setRole(scope.row)"
                                    >权限</el-button
                                >
                                <el-button
                                    type="text"
                                    @click="upUser(scope.row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="text"
                                    style="color: red"
                                    v-if="currentRole.roleCode !== 2"
                                    @click="delUser(scope.row)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="report-table-block">
                    <div class="report-table-block-in">
                        <el-pagination
                            background
                            :current-page.sync="position"
                            @current-change="handleCurrentChange"
                            :page-size="10"
                            layout="prev, pager, next, total"
                            :total="totalNum"
                        ></el-pagination>
                    </div>
                </div>
                <setUser
                    :value.sync="showValue"
                    :currentRole="currentRole"
                    :row="row"
                    @getList="getList"
                ></setUser>
                <testAddMenu :value.sync="testAdd"> </testAddMenu>
            </el-card>
        </div>
        <userTable
            :value.sync="showSet"
            :roleId="currentRole.id"
            @getList="getList"
        ></userTable>
        <setRole
            :value.sync="showRole"
            @getList="getList"
            :roleId="currentRole.id"
            :id="row.id"
            :resourceIdList="row.resourceIdList"
        ></setRole>
    </div>
</template>

<script type="text/ecmascript-6">
import roleMenu from './components/roleMenu'
import setUser from './components/setUser'
import testAddMenu from './components/testAddMenu'
import userTable from './components/userTable'
import setRole from './components/setRole'
export default {
    components: {
        roleMenu,
        setUser,
        testAddMenu,
        userTable,
        setRole
    },
    data: function () {
        return {
            form: {
                userName: '',
                status: ''
            },
            loading: false,
            showRole: false, // 权限设置
            showSet: false, // 批量设置
            currentRole: {},
            testAdd: false,
            showValue: false,
            row: {},
            isShowTip: false,
            tabClounm: [
                  { fieldName: 'userName', fieldLabel: '用户账户' },
                        { fieldName: 'passWord', fieldLabel: '用户密码' },
                        { fieldName: 'status', fieldLabel: '状态' }
            ],
            tabData: [],
            totalNum: 0,
            position: 1
        }
    },
    computed: {
    },
    mounted () {
    },
    watch: {
        position () {
            this.getList()
        }
    },
    methods: {
        setParams (item) {
            this.form = {
                userName: '',
                status: ''
            }
            if (item.id !== '') {
                this.isShowTip = false
            } else {
                this.isShowTip = true
            }
            console.log(item)
            this.currentRole = item
            if (item.roleCode === 2) {
                this.tabClounm = [
                    { fieldName: 'userName', fieldLabel: '用户账户' },
                    { fieldName: 'passWord', fieldLabel: '用户密码' },
                    { fieldName: 'userFullName', fieldLabel: '公司名称' },
                    { fieldName: 'status', fieldLabel: '状态' },
                    { fieldName: 'isSpecial', fieldLabel: '特殊代理商' }
                ]
            } else {
                if (item.roleTypeCode === 1 || item.roleTypeCode === 2) {
                    this.tabClounm = [
                        { fieldName: 'userName', fieldLabel: '用户账户' },
                        { fieldName: 'passWord', fieldLabel: '用户密码' },
                        { fieldName: 'userFullName', fieldLabel: '销售名称' },
                         { fieldName: 'agentListName', fieldLabel: '代理商' },
                        { fieldName: 'status', fieldLabel: '状态' }
                    ]
                } else {
                    this.tabClounm = [
                        { fieldName: 'userName', fieldLabel: '用户账户' },
                        { fieldName: 'passWord', fieldLabel: '用户密码' },
                        { fieldName: 'status', fieldLabel: '状态' }
                    ]
                }
            }
            this.getList()
        },
        upUser (row) {
            this.row = row
            this.showValue = true
        },
        setRole (row) {
            this.row = row
            this.showRole = true
        },
        delUser (row) {
            console.log(row)
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    params: {
                    }
                }
                this.$http.get(this.$store.state.IP + '/systemUserManage/deleteUser?id=' + row.id, params).then(response => {
                    response = response.body
                    console.log(response)
                    if (response.ret === '0') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getList()
                    }
                }, response => {
                    console.log('调用添加失败')
                })
            }).catch(() => {
            })
        },
        getList () {
            this.loading = true
            this.$http.post(this.$store.state.IP + '/systemUserManage/userList',
                {
                    ...this.form,
                    roleId: this.currentRole.id,
                    page: this.position - 1, // 页数
                    size: 10 // 一页显示数量

                },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                this.loading = false
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.tabData = response.res.list
                    this.totalNum = response.res.total
                }
            }, response => {
                this.loading = false
                console.log('通讯失败')
            })
        },
        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 150px

.flex
    display: flex
    justify-content: space-between

.room-manage
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)

    .personal-manage-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5
        position: relative

    .password-set-manage
        width: 100%
        height: 270px
        background: #fff

    .page-padding
        width: 100%
        background: #fff

.wrap
    display: flex
    max-height: 100% !important

    .left-page
        min-width: 200px
        box-shadow: 3px -2px 17px gainsboro

    .right-page
        flex: 1

        .head
            display: flex
            margin-bottom: 10px
            justify-content: space-between

    .clounmTitle
        color: #409eff
        border-color: #409eff
        width: 70px

.emt
    text-align: center
    padding-top: 150px

.report-table-block
    width: 100%
    padding-top: 22px
    height: 50px
    background: #fff
    box-sizing: border-box

    .report-table-block-in
        float: right
        padding-right: 17px
</style>
